<template>
  <div class="page-header-index-wide">
    <a-row type="flex" justify="space-around">
      <a-col :span="16">
        <a-card :bordered="false" title="人事事项">
          <div class="brief">
            <div v-for="(item, index) in briefList" :key="index" :span="2" class="brief-item" @click="hrTodo(item)">
              <div class="brief-item__body">
                <div :style="{ backgroundColor: item.color }" class="icon-box">
                  <span :class="item.icon" class="icon wk" />
                </div>
                <div class="info">
                  <div class="title">
                    {{ item.label }}
                  </div>
                  <div class="number">
                    {{ item.num ? item.num : '0' }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card id="color" style="width: 100%" :tab-list="tabList" :active-tab-key="key" @tabChange="tabChange($event)">
          <div style="height: 400px">
            <div v-if="key == 'tab1'">
              <div class="info" v-for="item in uselist1.slice(0, 4)" :key="item.id">
                <div class="info-img">
                  <img v-if="item.gender == '0'" src="../../../assets/gender0.png" />
                  <img v-if="item.gender == '1'" src="../../../assets/gender1.png" />
                </div>
                <div class="info-info">
                  <p class="p-name">{{ item.name }}</p>
                  <p class="p-info">{{ item.departmentId_dictText }}</p>
                  <p class="p-info">{{ item.positionName }}</p>
                </div>
                <div class="info-time">
                  <p>{{ item.beginDate.substr(0, 10) }}</p>
                </div>
              </div>
            </div>
            <div v-if="key == 'tab2'">
              <div class="info" v-for="item in uselist2.slice(0, 4)" :key="item.id">
                <div class="info-img">
                  <img v-if="item.gender == '0'" src="../../../assets/gender0.png" />
                  <img v-if="item.gender == '1'" src="../../../assets/gender1.png" />
                </div>
                <div class="info-info">
                  <p class="p-name">{{ item.partyId_dictText }}</p>
                  <p class="p-info">{{ item.departmentId_dictText }}</p>
                  <p class="p-info">{{ item.resignReason }}</p>
                </div>
                <div class="info-time">
                  <p>{{ item.estimateResignDate.substr(0, 10) }}</p>
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row type="flex" justify="space-around">
      <a-col :span="16">
        <!-- <a-card :bordered="false" title="员工工作年限分析">
          <div id="echart2" style="height: 400px; width: 90%"></div>
        </a-card> -->
        <a-card :bordered="false" title="职员数据统计分析">
          <div id="echart1" style="height: 400px; width: 90%"></div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card :bordered="false" title="员工性别分析">
          <div id="echart3" style="height: 400px"></div>
        </a-card>
      </a-col>
    </a-row>

    <a-row type="flex" justify="space-around">
      <a-col :span="8">
        <a-card :bordered="false" title="员工年龄分析">
          <div id="echart4" style="height: 400px; width: 90%"></div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card :bordered="false" title="员工类型分析">
          <div id="echart5" style="height: 400px; width: 90%"></div>
        </a-card>
      </a-col>

      <a-col :span="8">
        <a-card :bordered="false" title="试用期内员工比例">
          <div id="echart6" style="height: 400px; width: 90%"></div>
        </a-card>
      </a-col>
    </a-row>

    <j-modal
      :title="hrdoTitle"
      width="70%"
      :visible="hrdoVisible"
      :maskClosable="false"
      :confirmLoading="false"
      switchFullscreen
      @cancel="hrdoVisible = false"
    >
      <template slot="footer">
        <a-button key="submit" type="default" @click="hrdoVisible = false"> 关闭 </a-button>
      </template>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="hrdoColumns"
        :dataSource="hrdoDataSource"
        :pagination="false"
        :loading="false"
        :scroll="{ x: 1200, y: 500 }"
        class="j-table-force-nowrap"
      >
        <template slot="departmentId_dictText" slot-scope="text, record">
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{ record.departmentId_dictText }}</span>
            </template>
            <span class="ellipsis">
              {{ record.departmentId_dictText }}
            </span>
          </a-tooltip>
        </template>
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
          <img
            v-else
            :src="getImgView(text)"
            height="25px"
            alt=""
            style="max-width: 80px; font-size: 12px; font-style: italic"
          />
        </template>
      </a-table>
    </j-modal>
  </div>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
export default {
  name: 'IndexRecord',
  components: {},
  data() {
    return {
      isAllData: this.$store.getters.buData == 'allhrdata' ? true : false,
      tabList: [
        {
          key: 'tab1',
          tab: '最近入职员工',
          scopedSlots: { tab: 'customRender' },
        },
        {
          key: 'tab2',
          tab: '最近离职员工',
        },
      ],
      key: 'tab1',
      uselist: [],
      uselist1: [],
      uselist2: [],
      briefList: [
        {
          label: '待入职',
          icon: 'wk-icon-user-fill',
          num: '',
          color: '#0b5b31',
          link: '/crm/customer',
        },
        {
          label: '待转正',
          icon: 'wk-icon-user-fill',
          num: '',
          color: '#168a40',
          link: '/crm/business',
        },
        {
          label: '待离职',
          icon: 'wk-icon-user-fill',
          num: '',
          color: '#77b431',
          link: '/crm/business',
        },
        {
          label: '合同到期',
          icon: 'wk-record',
          num: '',
          color: '#e47c20',
        },
        {
          label: '生日',
          icon: 'wk-icon-b-people',
          num: '',
          color: '#004e91',
        },
        {
          label: '入职周年',
          icon: 'wk-icon-b-people',
          num: '',
          color: '#FFB940',
        },
      ],
      hrdoTitle: '',
      hrdoVisible: false,
      hrdoColumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          fixed: 'left',
        },
        {
          title: '姓名',
          align: 'center',
          sorter: (a, b) => a.name - b.name,
          dataIndex: 'name',
        },
        {
          title: '年龄',
          align: 'center',
          sorter: (a, b) => a.age - b.age,
          dataIndex: 'age',
        },
        {
          title: '性别',
          align: 'center',
          sorter: (a, b) => a.gender - b.gender,
          dataIndex: 'gender',
          customRender(text, record, index) {
            if (text == 1) {
              return '男'
            } else {
              return '女'
            }
          },
        },
        {
          title: 'BU',
          align: 'center',
          sorter: (a, b) => a.departmentId_dictText - b.departmentId_dictText,
          dataIndex: 'departmentId_dictText',
          scopedSlots: { customRender: 'departmentId_dictText' },
          ellipsis: true,
        },
        {
          title: '电话',
          align: 'center',
          sorter: (a, b) => a.phone - b.phone,
          dataIndex: 'phone',
        },
        {
          title: '生日',
          align: 'center',
          sorter: (a, b) => a.birthday - b.birthday,
          dataIndex: 'birthday',
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(5, 6) : text
          },
        },
        {
          title: '入职日期',
          align: 'center',
          sorter: (a, b) => a.beginContract - b.beginContract,
          dataIndex: 'beginContract',
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
          },
        },
        {
          title: '转正日期',
          align: 'center',
          sorter: (a, b) => a.conversionTime - b.conversionTime,
          dataIndex: 'conversionTime',
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
          },
        },
        {
          title: '合同终止日期',
          align: 'center',
          width: 150,
          sorter: (a, b) => a.endContract - b.endContract,
          dataIndex: 'endContract',
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
          },
        },
        {
          title: '期望离职日期',
          align: 'center',
          width: 150,
          sorter: (a, b) => a.estimateResignDate - b.estimateResignDate,
          dataIndex: 'estimateResignDate',
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
          },
        },
      ],
      hrdoDataSource: [],
      chartOptions1: {
        color: ['#86BFD8', '#37A2FF'],
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: ['入职', '离职'],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '入职',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(128, 255, 165)',
                },
                {
                  offset: 1,
                  color: 'rgba(1, 191, 236)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [],
          },
          {
            name: '离职',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(0, 221, 255)',
                },
                {
                  offset: 1,
                  color: 'rgba(77, 119, 255)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [],
          },
        ],
      },
      chartOptions2: {
        dataset: {
          source: [
            ['count', 'type'],
            [30, '一年以下'],
            [22, '1~3年'],
            [18, '3~5年'],
            [6, '5~10年'],
            [8, '10年以上'],
          ],
        },
        grid: { containLabel: true },
        xAxis: { name: '' },
        yAxis: { type: 'category' },
        visualMap: {
          orient: 'horizontal',
          left: 'center',
          min: 10,
          max: 500,
          text: ['最多人数', '最少人数'],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ['#E1BFF7', '#70BDF5', '#5DA2FD', '#8EA3FE', '#FBC561'],
          },
        },
        series: [
          {
            type: 'bar',
            encode: {
              // Map the "amount" column to X axis.
              x: 'count',
              // Map the "product" column to Y axis
              y: 'type',
            },
          },
        ],
      },
      chartOptions3: {
        title: {
          text: '',
          subtext: '',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '性别',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      chartOptions4: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '员工人数',
            type: 'bar',
            barWidth: '60%',
            data: [],
          },
        ],
      },
      chartOptions5: {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '0',
          left: 'center',
        },
        series: [
          {
            name: '员工类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '26',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      },
      chartOptions6: {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: '员工比例',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '26',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      },
      url: {
        getHrmDashBoardData: '/online/api/getHrmDashBoardData',
        getHrmDashBoardDataBu: '/online/api/getHrmDashBoardDataBu',
      },
    }
  },
  mounted() {
    this.getData()
    this.color()
  },
  filters: {
    dateFormat(val) {
      return val.subStr(0, 10)
    },
  },
  methods: {
    getData() {
      const param = {}
      let url = ''
      if(this.isAllData){
        url = this.url.getHrmDashBoardData
      }else{
        url = this.url.getHrmDashBoardDataBu
      }
      getAction(url, param).then((res) => {
        if (res.code == '0') {
          let result = res.result.workMap
          // 待办事项
          this.briefList[0].num = result.toDoList.todoNum1
          this.briefList[0].dataList = result.toDoList.todoList1
          this.briefList[1].num = result.toDoList.todoNum2
          this.briefList[1].dataList = result.toDoList.todoList2
          this.briefList[2].num = result.toDoList.todoNum3
          this.briefList[2].dataList = result.toDoList.todoList3
          this.briefList[3].num = result.toDoList.todoNum4
          this.briefList[3].dataList = result.toDoList.todoList4
          this.briefList[4].num = result.toDoList.todoNum5
          this.briefList[4].dataList = result.toDoList.todoList5
          this.briefList[5].num = result.toDoList.todoNum6
          this.briefList[5].dataList = result.toDoList.todoList6

          // 职员数据统计分析
          let ruzhilength = result.ruzhiDataList.length
          let lizhilength = result.lizhiDataList.length
          let ruzhistart = 0
          let lizhistart = 0
          if (ruzhilength > 12) {
            ruzhistart = ruzhilength - 12
          }
          if (lizhilength > 12) {
            lizhistart = lizhilength - 12
          }
          let ruzhitempList = result.ruzhiDataList.slice(ruzhistart, ruzhilength)
          let lizhitempList = result.lizhiDataList.slice(lizhistart, lizhilength)
          let rxdataList = []
          let lxdataList = []
          let ruzhidataList = []
          let lizhidataList = []
          ruzhitempList.forEach((e) => {
            rxdataList.push(e[0] + '-' + e[1])
            ruzhidataList.push(e[2])
          })
          lizhitempList.forEach((e) => {
            lxdataList.push(e[0] + '-' + e[1])
            lizhidataList.push(e[2])
          })
          this.chartOptions1.xAxis[0].data = rxdataList
          this.chartOptions1.series[0].data = ruzhidataList || []
          this.chartOptions1.series[1].data = lizhidataList || []
          // 最近入职最近离职
          this.uselist1 = result.recordResignMap.hrEmployeeRecordList || []
          this.uselist2 = result.recordResignMap.hrResignList || []
          this.uselist = this.uselist1

          // 工龄
          let workdata1 = [['count', 'type']]
          let workYear = result.beginDateYearNumDataList || []
          workYear.forEach((e) => {
            workdata1.push([e[1], e[0]])
          })
          console.log(workdata1)
          this.chartOptions2.dataset.source = workdata1

          // 员工性别分析
          let genderData = []
          result.genderDataList.forEach((e) => {
            genderData.push({
              name: e[0],
              value: e[1],
            })
          })
          this.chartOptions3.series[0].data = genderData
          // 员工年龄分析
          let xData = []
          let seriesData = []
          result.nianlignduanDataList.forEach((e) => {
            xData.push(e[0])
            seriesData.push(e[1])
          })
          this.chartOptions4.xAxis[0].data = xData
          this.chartOptions4.series[0].data = seriesData

          // 员工类型分析
          let categoryIdData = []
          result.categoryIdDataList.forEach((e) => {
            categoryIdData.push({
              name: e[0],
              value: e[1],
            })
          })
          this.chartOptions5.series[0].data = categoryIdData
          // 员工比例
          let workStateDataList = []
          result.workStateDataList.forEach((e) => {
            workStateDataList.push({
              name: e[0],
              value: e[1],
            })
          })
          this.chartOptions6.series[0].data = workStateDataList

          // 绘制图表
          this.drawLine()
        }
      })
    },
    tabChange(k) {
      if (k == 'tab1') {
        this.key = 'tab1'
        this.uselist = this.uselist1
      } else {
        this.key = 'tab2'
        this.uselist = this.uselist2
      }
    },
    drawLine() {
      var chartDom1 = document.getElementById('echart1')
      var myChart1 = this.echarts.init(chartDom1)

      // var chartDom2 = document.getElementById('echart2')
      // var myChart2 = this.echarts.init(chartDom2)

      var chartDom3 = document.getElementById('echart3')
      var myChart3 = this.echarts.init(chartDom3)

      var chartDom4 = document.getElementById('echart4')
      var myChart4 = this.echarts.init(chartDom4)

      var chartDom5 = document.getElementById('echart5')
      var myChart5 = this.echarts.init(chartDom5)

      var chartDom6 = document.getElementById('echart6')
      var myChart6 = this.echarts.init(chartDom6)

      myChart1.setOption(this.chartOptions1)
      // myChart2.setOption(this.chartOptions2)
      myChart3.setOption(this.chartOptions3)
      myChart4.setOption(this.chartOptions4)
      myChart5.setOption(this.chartOptions5)
      myChart6.setOption(this.chartOptions6)
    },
    color() {
      setTimeout(() => {
        var primaryColor = document.getElementsByClassName('ant-tabs-ink-bar')[0].style
        console.log(primaryColor)
        //document.getElementsByClassName('ant-card-head-title')[0].style.color = '#13C2C2';
      }, 1000)
    },
    hrTodo(item) {
      this.hrdoTitle = item.label
      this.hrdoDataSource = item.dataList
      this.hrdoVisible = true
    },
  },
}
</script>

<style lang="less" scoped>
.ant-col {
  padding: 8px 10px;
}
/* /deep/ .ant-card-head-title {
    color: @primary-color!important;
  } */
.info {
  width: 100%;
  overflow: hidden;
  background-color: white;
  padding: 10px 10px;
  .info-img {
    width: 80px;
    float: left;
    img {
      width: 100%;
    }
  }
  .info-info {
    width: 50%;
    float: left;
    margin-left: 5%;
    .p-name {
      font-size: 20px;
      font-weight: 500;
      margin-bottom: 0;
    }
    .p-info {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 0;
    }
  }
  .info-time {
    font-size: 14px;
  }
}

.top {
  width: 100%;
  overflow: hidden;
  .top-tiem {
    width: 30%;
    float: right;
    margin-right: 10px;

    .colour {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 5px;
    }
    .colour-red {
      background-color: rgba(255, 106, 228, 0.7);
    }
    .colour-blue {
      background-color: rgba(0, 128, 255, 0.7);
    }
  }
}
.circular {
  border: 1px solid white;
  width: 100%;
  height: 378px;

  .circular-blue {
    width: 40%;
    height: 30%;
    background-color: rgba(0, 128, 255, 0.7);
    border-radius: 50%;
    position: absolute;
    top: 40%;
    left: 15%;
  }
  .circular-red {
    width: 20%;
    height: 15%;
    background-color: rgba(255, 106, 228, 0.7);
    border-radius: 50%;
    position: absolute;
    top: 47%;
    left: 48%;
  }
}

.brief {
  width: 100%;
  height: 400px;
  padding: 10px 10px 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  .brief-item {
    padding: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    width: calc(33% - 20px);
    height: 140px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 8%);
    border-radius: 4px;
    margin: 10px;
    &:hover {
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 20%);
    }
    .brief-item__body {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      align-items: center;
      overflow: hidden;
      .icon-box {
        display: inline-block;
        margin-top: 15px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 50%;
        margin-right: 10px;
        margin-left: 15px;
        float: left;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        .icon {
          color: #fff;
          font-size: 19px;
        }
      }
      .info {
        display: inline-block;
        width: calc(100% - 80px);
        overflow: hidden;
        .title {
          font-size: 18px;
        }
        .number {
          font-size: 24px !important;
          line-height: 1;
          font-weight: 700;
          margin-top: 8px;
          margin-right: 5px;
          color: #000;
          overflow: hidden;
          span {
            font-size: 23px;
            font-weight: 700;
            line-height: 1;
            margin-top: 8px;
            color: #2362fb;
          }
        }
      }
    }
    .brief-item__others {
      position: relative;
      width: 100px;
      text-align: center;
      padding: 0 3px;
      overflow: hidden;
      &::before {
        position: absolute;
        top: 7.5%;
        left: 0;
        content: '';
        width: 1px;
        height: 85%;
        background-color: #e6e6e6;
        display: block;
      }
    }
  }
}
</style>
